<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>班级管理</title>

<style>
        h1 {
            font-size: 30px;
            text-transform: uppercase;
            font-weight: 300;
            text-align: center;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            table-layout: fixed;
        }
        
        
        .tbl-content {
            height: 300px;
            overflow-x: auto;
            margin-top: 0px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        th {
            padding: 20px 15px;
            text-align: left;
            font-weight: 500;
            font-size: 12px;
            text-transform: uppercase;
        }
        td {
            padding: 15px;
            text-align: left;
            vertical-align: middle;
            font-weight: 300;
            font-size: 12px;
            border-bottom: solid 1px rgba(255,255,255,0.1);
        }


       
    </style>
<link rel="stylesheet" href="js/jquery-ui.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
function refreshTable(){
	$.post('banji',{method:'allClass'},function(data){
		var tbody = $('#tbody');
		tbody.empty();
		for(var i=0;i<data.length;i++){
			var bj = data[i];
			console.log(bj);
			var tr=$('<tr/>');
			tr.append($('<td/>').html(bj.id));
			tr.append($('<td/>').html(bj.name));
			tr.append($('<td/>').html(bj.manager));
			tr.append($('<td/>').html('<a href="javascript:xg('+bj.id+')">修改</a>'));
			tr.append($('<td/>').html('<a href="javascript:del('+bj.id+')">删除</a>'));
			tbody.append(tr);
		}
	});
}
function xg(id) {
	var dialog=$('#dialog');
	dialog.load('banji',{method:'ajaxEdit',id:id},function(){
		dialog.dialog('open');
	});
}
function del(id) {
	if(confirm("是否要删除这条记录？")){
		window.location="banji?method=delete&id="+id;
	}
}
$(function() {
	refreshTable();
	$('#dialog').dialog({
		autoOpen:false,
		title:'编辑',
		modal:true,
		width:400,
		buttons:{
			'保存':function(){
				var form=$(this).find('form');
				var formDom=form[0];
				var name=formDom.name.value;
				var manager=formDom.manager.value;
				if (name.length==0) {
					alert("班级名称必填");
					return;
				}
				if(manager.length==0){
					alert('班主任必填');
					return;
				}
				var params=form.serialize();
				$.post('banji?method=ajaxSave',params,function(data){
					refreshTable();
				});
				$(this).dialog('close');
			},
			'退出':function(){
				$('#dialog').dialog('close');
			}
		}
	});
});
function add(id) {
	var dialog=$('#dialog');
	dialog.load('banji',{method:'ajaxAdd',id:id},function(){
		dialog.dialog('open');
	});
}
</script>
</head>
<body background="WebContent/images/1.jpg">
<div id="dialog" style="display: none;"></div>
<div class="contrainer">
	<h3>班级管理</h3>
	 <button type="button" onclick="add()">新增</button>
	 
	<table class="tbl-header" >
		<thead >
			<tr>
				<th>序号</th>
				<th>班级名称</th>
				<th>班主任</th>
				<th colspan="2">操作</th>
				
			</tr>
		</thead>
		<tbody id="tbody">
		
		</tbody>
		
	</table>
	<a href="main.jsp">返回主页</a>
	</div>


</body>
</html>